<ion-header>
  <ion-toolbar color="primary">
    <ion-navbar>
      <ion-row>
        <ion-title>离线操作</ion-title>
        <div (click)="logIn()" ion-button color="light" clear>
          <ion-icon name="log-in"></ion-icon>&nbsp;
          在线登录
        </div>
      </ion-row>
    </ion-navbar>
  </ion-toolbar>
</ion-header>

<ion-content [hidden]="pageErrorTag">
  <h1>非法操作,页面标识参数无效</h1>
</ion-content>

<ion-content [hidden]="pageOneTag">

  <ion-card [hidden]="!pageOneContainerTag">
    <ion-card-content>
      <ion-card-title>
        请扫描容器二维码
      </ion-card-title>
      <ion-row>
        <!--APP-->
        <button col-12 ion-button full (click)="toScan('container')">
          <ion-icon name="barcode"></ion-icon>&nbsp;
          开始扫描
        </button>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-card [hidden]="pageOneContainerTag">
    <ion-card-content>
      <ion-card-title>
        当前容器:{{CurrentContainer.name}}
      </ion-card-title>
      <ion-row>
        <ion-col col-2.5 text-left>
          <h5>编码:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{CurrentContainer.code}}</h5>
        </ion-col>
        <ion-col col-1>
          <h4>丨</h4>
        </ion-col>
        <ion-col col-2.5 text-left>
          <h5>类型:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{CurrentContainer.type}}</h5>
        </ion-col>
      </ion-row>
      <ion-row>
        <!--APP-->
        <button col-12 ion-button full (click)="toScan('container')">
          <ion-icon name="barcode"></ion-icon>&nbsp;
          切换容器
        </button>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-card [hidden]="pageOneContainerTag||!pageOnematerielTag">
    <ion-card-content>
      <ion-card-title>
        请扫描货物二维码
      </ion-card-title>
      <ion-row>
        <!--APP-->
        <button col-12 ion-button full (click)="toScan('materiel')">
          <ion-icon name="barcode"></ion-icon>&nbsp;
          开始扫描
        </button>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-card [hidden]="pageOnematerielTag">
    <ion-card-content>
      <ion-card-title>
        当前货物:{{Currentmateriel.name}}
      </ion-card-title>
      <ion-row>
        <ion-col col-2 text-left>
          <h5>编码:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{Currentmateriel.code}}</h5>
        </ion-col>
        <ion-col col-1>
          <h4>丨</h4>
        </ion-col>
        <ion-col col-2 text-left>
          <h5>重量:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{Currentmateriel.weight}}kg</h5>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col col-2 text-left>
          <h5>长:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{Currentmateriel.length}}cm</h5>
        </ion-col>
        <ion-col col-1>
          <h4>丨</h4>
        </ion-col>
        <ion-col col-2 text-left>
          <h5>宽:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{Currentmateriel.width}}cm</h5>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col col-2 text-left>
          <h5>高:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{Currentmateriel.height}}cm</h5>
        </ion-col>
        <ion-col col-1>
          <h4>丨</h4>
        </ion-col>
        <ion-col col-2 text-left>
          <h5>体积:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <!-- <h5>{{(Currentmateriel.length*Currentmateriel.width*Currentmateriel.height)/1000000| number : '1.0-6'}}m³</h5> -->
          <h5>{{Currentmateriel.volume}}cm</h5>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-item>
          <ion-label>当前照片适用业务:</ion-label>
          <ion-select [(ngModel)]="bizType" interface="popover">
            <ion-option value="10">装货</ion-option>
            <ion-option value="20">卸货</ion-option>
          </ion-select>
        </ion-item>
      </ion-row>

      <ion-row>
        <ion-col col-7>
          <ion-label *ngIf="loadOrUnloadImgNumber>0">已经拍摄照片({{loadOrUnloadImgNumber}})张</ion-label>
        </ion-col>
        <ion-col col-5>
          <button ion-button clear full (click)="takePhoto('loadOrUnload')">
            <ion-icon name="camera"></ion-icon>&nbsp;拍摄照片
          </button>
        </ion-col>
      </ion-row>

      <ion-row>
        <!--APP-->
        <button col-12 ion-button full (click)="toScan('materiel')">
          <ion-icon name="barcode"></ion-icon>&nbsp;
          继续扫描
        </button>
      </ion-row>

    </ion-card-content>
  </ion-card>

  <ion-list>
    <ion-list-header>
      当前货物列表
    </ion-list-header>
    <ion-item *ngFor="let item of loadOrUnloadList">
      <ion-thumbnail item-start>
        <img src="{{item.img}}">
      </ion-thumbnail>
      <p>容器名称:{{item.containerName}}&nbsp;&nbsp;容器编码:{{item.containerCode}}</p>
      <p>货物名称:{{item.materielName}}&nbsp;&nbsp;货物编码:{{item.materielCode}}</p>
      <p>货物重量:{{item.weight}}&nbsp;&nbsp;货物体积:{{item.volume}}</p>
      <h2 item-end>{{item.date}}</h2>
    </ion-item>
  </ion-list>

</ion-content>


<ion-content [hidden]="pageTwoTag">

  <ion-card [hidden]="!pageTwoScanTag">
    <ion-card-content>
      <ion-card-title>
        请扫描货物二维码
      </ion-card-title>
      <ion-row>
        <!--APP-->
        <button col-12 ion-button full (click)="toScan('ruleRecord')">
          <ion-icon name="barcode"></ion-icon>&nbsp;
          开始扫描
        </button>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-card [hidden]="pageTwoScanTag">
    <ion-card-content>
      <ion-card-title>
        当前货物:{{ruleRecordmateriel.name}}
      </ion-card-title>
      <ion-row>
        <ion-col col-2.5 text-left>
          <h5>编码:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{ruleRecordmateriel.code}}</h5>
        </ion-col>
        <ion-col col-1>
          <h4>丨</h4>
        </ion-col>
        <ion-col col-2.5 text-left>
          <h5>强制拍照:</h5>
        </ion-col>
        <ion-col col-3.5 text-right>
          <h5>{{ruleRecordmateriel.takePhoto==0?"是":"否"}}</h5>
        </ion-col>
      </ion-row>
      <ion-row>
        <!--APP-->
        <button col-12 ion-button full (click)="toScan('ruleRecord')">
          <ion-icon name="barcode"></ion-icon>&nbsp;
          继续扫描
        </button>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-list [hidden]="pageTwoScanTag">
    <ion-list-header>
      <h2>请根据实际打尺填写下列信息(左侧为标准值)</h2>
    </ion-list-header>
    <ion-item>
      <ion-label fixed>长度(cm)</ion-label>
      <ion-input type="text" value="{{ruleRecordmateriel.stalength}}" disabled="true"></ion-input>
      <ion-input type="text" [(ngModel)]="length"  placeholder="请输入测量值"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>宽度(cm)</ion-label>
      <ion-input type="text" value="{{ruleRecordmateriel.stawidth}}" disabled="true"></ion-input>
      <ion-input type="text" [(ngModel)]="width"  placeholder="请输入测量值"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>高度(cm)</ion-label>
      <ion-input type="text" value="{{ruleRecordmateriel.staheight}}" disabled="true"></ion-input>
      <ion-input type="text" [(ngModel)]="height"  placeholder="请输入测量值"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>重量(kg)</ion-label>
      <ion-input type="text" value="{{ruleRecordmateriel.staweight}}" disabled="true"></ion-input>
      <ion-input type="text" [(ngModel)]="weight"  placeholder="请输入测量值"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>备注</ion-label>
      <ion-input type="text" [(ngModel)]="description"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>拍照</ion-label>
      <ion-input type="text" value="已经拍摄照片({{ruleRecordImgNumber}})张" disabled="true"></ion-input>
    </ion-item>
  </ion-list>

  <ion-card [hidden]="true">
    <ion-card-content>
      修复list重叠bug
    </ion-card-content>
  </ion-card>

  <ion-list>
    <ion-list-header>
      当前打尺列表
    </ion-list-header>
    <ion-item *ngFor="let item of ruleRecordList">
      <ion-thumbnail item-start>
        <img src="{{item.img}}">
      </ion-thumbnail>
      <p>名称:{{item.name}}&nbsp;&nbsp;编码:{{item.code}}</p>
      <p>长:{{item.length}}(cm)&nbsp;宽:{{item.width}}(cm)&nbsp;高:{{item.height}}(cm)</p>
      <p>备注/描述:{{item.description}}</p>
      <h2 item-end>{{item.date}}</h2>
    </ion-item>
  </ion-list>
</ion-content>

<ion-content [hidden]="pageThreeTag">
  <ion-card>
    <ion-card-content>
      <ion-card-title>
        异常信息
      </ion-card-title>
      <ion-row>
        <textarea id="exception-info" placeholder="点击此处即可编辑" (keyup)="infoChange()" [(ngModel)]="exceptionInfo"></textarea>
      </ion-row>
    </ion-card-content>
  </ion-card>

  <ion-list>
    <ion-list-header>
      异常信息列表
    </ion-list-header>
    <ion-item *ngFor="let item of exceptionInfoList">
      <p>备注/描述:{{item.text}}</p>
      <h2 item-end>{{item.date}}</h2>
    </ion-item>
  </ion-list>
</ion-content>


<ion-footer>

  <ion-row [hidden]="pageOneTag">
    <ion-col col-6>
      <button ion-button full [disabled]="pageOneSaveTag" (click)="saveData('loadOrUnload')">
        保存
      </button>
    </ion-col>
    <ion-col col-6>
      <button ion-button full color="light" (click)="goBack()">返回</button>
    </ion-col>
  </ion-row>

  <ion-row [hidden]="pageTwoTag">
    <ion-col col-4>
      <button ion-button full [disabled]="pageTwoSaveTag" (click)="saveData('ruleRecord')">
        保存
      </button>
    </ion-col>
    <ion-col col-4>
      <button ion-button full [disabled]="pageTwoPhotoTag" (click)="takePhoto('ruleRecord')">
        <ion-icon name="camera"></ion-icon>&nbsp;拍摄照片
      </button>
    </ion-col>
    <ion-col col-4>
      <button ion-button full color="light" (click)="goBack()">返回</button>
    </ion-col>
  </ion-row>

  <ion-row [hidden]="pageThreeTag">
    <ion-col col-6>
      <button ion-button full [disabled]="pageThreeSaveTag" (click)="saveData('exceptionReport')">
        保存
      </button>
    </ion-col>

    <ion-col col-6>
      <button ion-button full color="light" (click)="goBack()">返回</button>
    </ion-col>
  </ion-row>

</ion-footer>